import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hibrid_flutter/gen/assets.gen.dart';
import 'package:hibrid_flutter/main.dart';
import 'package:hibrid_flutter/my_route.dart';
import 'package:hibrid_flutter/widget/dir_image.dart';
import 'package:hibrid_flutter/widget/my_avater_image.dart';

import '../page/mine_page/mine_page_controller.dart';
import '../page/mine_page/scroll_horizontal.dart';

class MineTabTop extends StatefulWidget {
  double _editUserBtnWidth = 0;
  MineTabTop({Key? key}) : super(key: key);
  @override
  _MineTabTopState createState() => _MineTabTopState();
}

class _MineTabTopState extends State<MineTabTop> {
  final _controller = Get.put(MinePageController());
  @override
  Widget build(BuildContext context) {
    widget._editUserBtnWidth = (MediaQuery.of(context).size.width);
    print('MineTabTop的高度 ${MediaQuery.of(context).size.height}');
    var mineTop = Container(
      width: double.infinity,
      height: double.infinity,
      color: const Color(0xffffffff),
      child: Stack(alignment: Alignment.topLeft, children: [
        bgPNG(),
        Column(
          children: <Widget>[
            Container(
              height: 20,
            ),
            topBar(),
            userInfo(),
            accountDescription(),
            desAgeSchool(),
            scrollHorizontal(),
            editAddSetting(),
          ],
        ),
      ]),
    );
    return mineTop;
  }

  /// 背景墙
  Widget bgPNG() => SizedBox(
    width: double.infinity,
    height: 249,
    child: GestureDetector(
      onTap: () async {
        print('photoPicker-_MinePageState-${MyRoute.photoPicker}');
        var res = await myRoute.push(name: MyRoute.photoPicker, args: {
          MyRoute.key_url: _controller.background,
          MyRoute.key_height: '188'
        });
        print('photoPicker -_MinePageState res=  $res ');
        if (res != null && res is String) {
          print('photoPicker -_MinePageState res != null  $res ');
          _controller.background = res;
        }
      },
      child: DirImage(
        url: _controller.background,
        width: double.infinity,
      ),
    ),
  );

  /// 顶部一行按钮
  Widget topBar() => Container(
    color: Colors.transparent,
    height: 54,
    width: double.infinity,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width * 0.5,
        ),
        Expanded(
            flex: 2,
            child: SizedBox(
              child: Container(
                height: 30,
                alignment: Alignment.center,
                padding: const EdgeInsets.only(
                    left: 8, top: 3, right: 8, bottom: 3),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(26),
                  color: const Color(0xaa666666),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    DirImage(
                      url: Assets.images.icVisitors.path,
                      width: 20,
                      height: 20,
                      fit: BoxFit.contain,
                    ),
                    Container(
                      margin: const EdgeInsets.only(left: 3),
                      alignment: Alignment.center,
                      child: const Text(
                        '新访客6w+',
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                            decoration: TextDecoration.none),
                      ),
                    )
                  ],
                ),
              ),
            )),
        Expanded(
            child: Container(
              height: 35,
              margin: const EdgeInsets.only(left: 8, right: 8),
              child: Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(26),
                  color: const Color(0xaa666666),
                ),
                child: DirImage(
                    url: Assets.images.icSearch.path,
                    width: 24,
                    height: 24,
                    fit: BoxFit.contain),
              ),
            )),
        Expanded(
            child: Container(
              height: 35,
              margin: const EdgeInsets.only(left: 8, right: 8),
              child: Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(26),
                  color: const Color(0xaa666666),
                ),
                child: DirImage(
                    url: Assets.images.icMore.path,
                    width: 24,
                    height: 24,
                    fit: BoxFit.contain),
              ),
            )),
      ],
    ),
  );

  /// 头像+名称+抖音号+心情
  Widget userInfo() => Padding(
    padding: const EdgeInsets.only(left: 12, top: 60),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        MyAvatarImage(
          Shape.CIRCLE,
          Assets.images.icDouMine.path,
          width: 80,
          height: 80,
          radius: 38,
        ),
        SizedBox(
          height: 80,
          child: Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                    child: Text(
                      _controller.userInfo.userName,
                      style: const TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          decoration: TextDecoration.none,
                          fontWeight: FontWeight.bold),
                    )),
                Text(
                  _controller.userInfo.userNo,
                  style: const TextStyle(
                    fontSize: 12,
                    decoration: TextDecoration.none,
                    color: Color(0xcceeeeee),
                  ),
                ),
                Expanded(
                  child: Container(
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(3)),
                      color: Color(0xaa444444),
                    ),
                    height: 20,
                    padding: const EdgeInsets.only(
                        left: 6, top: 2, right: 6, bottom: 2),
                    margin: const EdgeInsets.only(top: 8),
                    child: Text(
                      _controller.userInfo.userTemper,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 12,
                        decoration: TextDecoration.none,
                        color: Colors.white38,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
  );

  /// 获赞+关注+粉丝
  Widget accountDescription() => Container(
    margin: const EdgeInsets.only(top: 25),
    padding:
    const EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 15),
    decoration: const BoxDecoration(
        color: Color(0xffffffff),
        borderRadius: BorderRadius.vertical(top: Radius.circular(12))),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
            child: Row(
              children: [
                Text(
                  _controller.userInfo.praiseNum,
                  style: const TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      decoration: TextDecoration.none),
                ),
                const Padding(
                  padding: EdgeInsets.only(left: 2),
                  child: Text(
                    '获赞',
                    style: TextStyle(
                        color: Color(0x88333333),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                )
              ],
            )),
        Expanded(
            child: Row(
              children: [
                Text(
                  _controller.userInfo.focusNum,
                  style: const TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      decoration: TextDecoration.none),
                ),
                const Padding(
                  padding: EdgeInsets.only(left: 2),
                  child: Text(
                    '关注',
                    style: TextStyle(
                        color: Color(0x88333333),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                )
              ],
            )),
        Expanded(
            child: Row(
              children: [
                Text(
                  _controller.userInfo.followNum,
                  style: const TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      decoration: TextDecoration.none),
                ),
                const Padding(
                  padding: EdgeInsets.only(left: 2),
                  child: Text(
                    '粉丝',
                    style: TextStyle(
                        color: Color(0x88333333),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                )
              ],
            )),
        Expanded(
            child: Row(
              children: [
                Text(
                  _controller.userInfo.friendNum,
                  style: const TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      decoration: TextDecoration.none),
                ),
                const Padding(
                  padding: EdgeInsets.only(left: 2),
                  child: Text(
                    '朋友',
                    style: TextStyle(
                        color: Color(0x88333333),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                )
              ],
            )),
        Expanded(
            child: SizedBox(
              width: MediaQuery.of(context).size.width * 0.3,
            )),
      ],
    ),
  );

  /// 描述+年龄+学校
  Widget desAgeSchool() => Align(
    alignment: Alignment.topLeft,
    child: Container(
      padding: const EdgeInsets.only(left: 15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            _controller.userInfo.description,
            textAlign: TextAlign.left,
            style: const TextStyle(
                color: Color(0xdd666666),
                fontSize: 14,
                decoration: TextDecoration.none),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 3),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: const EdgeInsets.only(
                      left: 4, top: 2, right: 4, bottom: 2),
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(3)),
                      color: Color(0x66e6e6e6)),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 2),
                        child: DirImage(
                          url: Assets.images.icMale.path,
                          width: 15,
                          height: 12,
                        ),
                      ),
                      Text(
                        _controller.userInfo.age,
                        textAlign: TextAlign.left,
                        style: const TextStyle(
                            color: Color(0xee686868),
                            fontSize: 12,
                            decoration: TextDecoration.none),
                      ),
                      const Text(
                        '岁',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color(0xee686868),
                            fontSize: 10,
                            decoration: TextDecoration.none),
                      )
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.only(
                      left: 4, top: 2, right: 4, bottom: 2),
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(3)),
                      color: Color(0x66e6e6e6)),
                  child: Text(
                    _controller.userInfo.school,
                    textAlign: TextAlign.left,
                    style: const TextStyle(
                        color: Color(0xee686868),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.only(
                      left: 4, top: 2, right: 4, bottom: 2),
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(3)),
                      color: Color(0x66e6e6e6)),
                  child: Text(
                    _controller.userInfo.tagMore,
                    textAlign: TextAlign.left,
                    style: const TextStyle(
                        color: Color(0xee686868),
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                ),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.36,
                )
              ],
            ),
          )
        ],
      ),
    ),
  );

  /// 编辑资料+添加朋友
  Widget editAddSetting() => Align(
    alignment: Alignment.topLeft,
    child: Container(
      padding: const EdgeInsets.only(left: 15, right: 15),
      child: Padding(
        padding: const EdgeInsets.only(top: 15),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              padding: EdgeInsets.only(
                  left: widget._editUserBtnWidth * 0.15,
                  top: 8,
                  right: widget._editUserBtnWidth * 0.15,
                  bottom: 8),
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(3)),
                  color: Color(0x66e6e6e6)),
              child: const Text(
                '编辑资料',
                textAlign: TextAlign.left,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    decoration: TextDecoration.none),
              ),
            ),
            Container(
              padding: EdgeInsets.only(
                  left: widget._editUserBtnWidth * 0.15,
                  top: 8,
                  right: widget._editUserBtnWidth * 0.15,
                  bottom: 8),
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(3)),
                  color: Color(0x66e6e6e6)),
              child: const Text(
                '添加朋友',
                textAlign: TextAlign.left,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    decoration: TextDecoration.none),
              ),
            ),
          ],
        ),
      ),
    ),
  );

  Widget scrollHorizontal() => ScrollHorizontal();
}


